<style>
  #cqInput,#inp1,#inp2,#inp3{
    width: 100%;
    height: 50px;
    font-size: 16px;
    background: #fff;
  }
  .el-cascader{
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
  .el-cascader .el-input--suffix .el-input__inner{
    width: 100%;
    height: 50px;
    font-size: 16px;
    background: #fff;
    line-height: 50px;
  }
  .el-cascader .el-input--suffix .el-input__suffix{
    display: none;
  }
</style>
<template>
    <div class="createQuestion">
      <header>添加事件</header>
      <div class="content">
        <div v-if="haveName != undefined && haveName != null && haveName !=''">
          <div class="classification">
            <span class="cf_title">标题</span>
            <div class="inp">
              <el-input v-model="title" placeholder="请输入标题" clearable></el-input>
            </div>
          </div>
        </div>
        <div class="options">
          <!-- 选择产品 -->
          <div class="opt">
            <span class="opt_titile">选择产品</span>
            <div class="inp">
              <i class="jt"></i>
              <el-select v-model="products" placeholder="请选择产品" id="inp1">
                <el-option
                  v-for="item in productList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 选择指标 -->
          <div class="opt">
            <span class="opt_titile">选择指标</span>
            <div class="inp">
              <i class="jt"></i>
              <el-select v-model="target" placeholder="请选择指标" id="inp2">
                <el-option
                  v-for="item in targetList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 选择问题来源 -->
          <div class="opt">
            <span class="opt_titile">选择问题来源</span>
            <div class="inp">
              <i class="jt"></i>
              <el-select v-model="dataSource" placeholder="选择问题来源" id="inp3">
                <el-option
                  v-for="item in dataSourceList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 选择问题分类 -->
        <div class="classification">
          <div class="cf_title">选择问题分类</div>
          <div class="inp">
            <i class="jt"></i>
            <el-cascader
              :placeholder="data_category"
              expand-trigger="hover"
              :options="proposalList"
              :change-on-select="true"
              :props="propData"
              v-model="category"
            >
            </el-cascader>
          </div>
        </div>
      </div>
      <footer>
        <div class="buttons but1" @click="close">取消</div>
        <div class="buttons but2" @click="addQuestion">确认</div>
      </footer>
    </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  export default {
    props:['haveName'],
    name: "createQuestion",
    data() {
      return {
        products:'',
        target:'',
        dataSource:'',
        category:'',
        data_category:'请选择问题分类',
        propData: {
          label:'name',
          value:'name',
          children: 'data'
        },
        title: '',
      }
    },
    computed:{
      ...mapGetters([
        'productList',
        'targetList',
        'dataSourceList',
        'proposalList'
      ])
    },
    created() {
      let self = this
      if (self.haveName != undefined && self.haveName != null && self.haveName != ''){
        self.products = self.haveName.data.product
        self.target = self.haveName.data.target
        self.dataSource = self.haveName.data.source
        self.data_category = self.haveName.data.category
        if (self.haveName.data.title != undefined && self.haveName.data.title != null && self.haveName.data.title != ''){
          self.title = self.haveName.data.title
        } else {
          self.title = self.haveName.data.product + ' ' + self.haveName.data.category
        }
      }
    },
    mounted() {
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //取消
      close(){
        let self = this
        self.upstate({key:'createQuestionOpen',val:false})
      },
      //确定
      addQuestion(){
        let self = this
        let categorys='';
        if (self.category != '' && self.category instanceof Array==true){
          if (self.category.length>2){
            categorys = self.category[2];
          }else if (self.category[0] == '其它'){
            categorys = '其它'
          }else{
            categorys='';
          }
        }else if (self.data_category != '' && self.category == '' && self.data_category != '请选择问题分类'){
          categorys = self.data_category;
        }else{
          categorys='';
        }
        if (self.products != '' && self.target != '' && categorys != '' && self.dataSource != ''){
          let params={
            data: {
              product: self.products, //产品
              target: self.target, //指标
              category: categorys, //分类
              source: self.dataSource //来源
            },
            type: "proposal",
            status:"open",
            creator: localStorage.getItem('userName')
          }
          if (self.haveName != undefined && self.haveName != null && self.haveName != ''){
            if (self.title != ''){
              params.data['title'] = self.title
            } else {
              this.$notify.error({
                title: '错误',
                message: '标题不能为空'
              });
              return false
            }
            params['id'] = self.haveName.id
          }
          if (self.haveName != undefined && self.haveName != null && self.haveName != ''){
            self.$http.post(self.conURL + 'mongo/api/docs/update',params).then(res => {
              this.$emit('params',res.data)
              self.upstate({key:'createQuestionOpen',val:false})
            }).catch(error=>{
              console.log(error)
              this.$notify.error({
                title: '错误',
                message: '创建失败'
              });
            });
          } else {
            self.$http.post(self.conURL + 'mongo/api/docs/create',params).then(res => {
              this.$emit('params',res.data)
              self.upstate({key:'createQuestionOpen',val:false})
            }).catch(error=>{
              console.log(error)
              this.$notify.error({
                title: '错误',
                message: '创建失败'
              });
            });
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: '内容必须全部选取'
          });
        }
      },
    }
  }
</script>

<style lang="less">
  .createQuestion{
    width: 660px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    box-shadow: #eeeeee 0px 0px 15px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    header{
      width: 100%;
      height: 74px;
      line-height: 74px;
      border-bottom: 1px solid #e5e5e5;
      padding: 0 30px;
      box-sizing: border-box;
      font-size: 20px;
      color: #222222;
    }
    .content{
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 32px 28px;
      box-sizing: border-box;
      .options{
        display: flex;
        flex-direction: row;
        padding: 20px 0;
        padding-top: 0;
        box-sizing: border-box;
        .opt{
          width: 193px;
          display: flex;
          flex-direction: column;
          margin-right: 10px;
          .opt_titile{
            font-size: 16px;
            line-height: 16px;
            color: #666666;
            margin-bottom: 13px;
          }
          .inp{
            width: 100%;
            height: 50px;
            position: relative;
            .jt{
              width:0;
              height:0;
              border-left:7px solid transparent;
              border-right:7px solid transparent;
              border-top:10px solid #aaaaaa;
              position: absolute;
              right: 15px;
              top: 21px;
              z-index: 1;
            }
          }
        }
      }
      .classification{
        display: flex;
        flex-direction: column;
        .cf_title{
          font-size: 16px;
          line-height: 16px;
          color: #666666;
          margin-bottom: 13px;
        }
        .el-input--suffix .el-input__inner{
          height: 40px;
          background: #fff;
        }
        .inp{
          width: 100%;
          height: 50px;
          position: relative;
          .jt{
            width:0;
            height:0;
            border-left:7px solid transparent;
            border-right:7px solid transparent;
            border-top:10px solid #aaaaaa;
            position: absolute;
            right: 15px;
            top: 21px;
            z-index: 1;
          }
        }
      }
    }
    footer{
      width: 100%;
      height: 59px;
      background: #fafafa;
      border-top: 1px solid #e5e5e5;
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .buttons{
        width: 93px;
        height: 37px;
        line-height: 39px;
        text-align: center;
        font-size: 16px;
        margin: auto 0;
        cursor: pointer;
      }
      .but1{
        background: #fff;
        color: #666666;
        border: 1px solid #dddddd;
        margin-right: 10px;
      }
      .but2{
        background: #0f76c8;
        color: #fff;
        border: 1px solid #0f76c8;
      }
    }
  }
</style>
